<template>
    <h1>食谱列表展示页面</h1>
    <a href="/AddFood">新增食谱</a><br>
    <a href="/AddKang">新增康复理疗</a><br>
    食谱标题：
    <input type="text" v-model="name">
    食谱类型：
    <select v-model="tId">
        <option value="-1">--请选择--</option>
        <option v-for="item in Bang" :value="item.tId">{{item.tName}}</option>
    </select>
    <input type="button" value="查询" @click="Show">

    <table border="1">
        <thead>
            <td>食谱标题</td>
            <td>食谱详情</td>
            <td>食谱状态</td>
            <td>食谱分类</td>
            <td>食谱封面</td>
            <td>操作</td>
        </thead>

        <tbody v-for="item in info">
            <td>{{item.name}}</td>
            <td>{{item.xiangqing}}</td>
            <td>{{item.state==true?"启用":"禁用"}}</td>
            <td>{{item.tName}}</td>
            <td><img :src="item.img" style="height: 100px;width: 100px;"></td>
            <td>操作</td>
        </tbody>
    </table>
</template>

<script setup lang="ts">
import { ref,onMounted } from "vue";
import axios from "axios";
import { useRouter } from "vue-router";
const router=useRouter();
onMounted(()=>{
    Show();
    Bin();
})

const Bang=ref([{
    "tId": 0,
    "tName": ""
}])

const Bin=()=>{
    axios.get("https://localhost:7052/api/Food/Getall")
    .then(res=>{
        Bang.value=res.data
    })
    .catch(error=>{
        console.log(error)
    })
}

const info=ref([{
    "id": 1,
    "name": "",
    "xiangqing": "",
    "state": true,
    "tId": 1,
    "img": "",
    "delete": 0,
    "tName": ""
}])

const name=ref("")
const tId=ref()

const Show=()=>{
    axios.get("https://localhost:7052/api/Food/Show",{
        params:{
            name:name.value,
            tId:tId.value,
        }
    })
    .then(res=>{
       info.value=res.data
    })
    .catch(error=>{
        console.log(error)
    })
}
</script>